<!DOCTYPE html>
<html>
<head>
    <?php
    Yii::app()->clientScript->registerCoreScript('jquery');
    ?>
    <style type="text/css">
        html, body, #map-canvas {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKgAyWBITNzZFDm3EAfRb8Li3s9tsy-jY">
    </script>

</head>
<body>
<p>
    <button onclick="geoFindMe()">Show my location</button>
</p>
<div id="out"></div>
<div id="map-canvas"></div>
<script type="text/javascript">
    var base = "<?php echo HSUrl::home();?>";
    geocoder = new google.maps.Geocoder();
    $(document).ready(function () {
        $.ajax({
            'url': base + '/ajax/getAll',
            'success': function (data) {
                for (var $i = 0; $i < data.results.length; $i++) {
                    var $address = data.results[$i]['address'];
                    var $id = data.results[$i]['id'];
                    codeAddress($address, $id);
                }
            }
        });

    });
    function codeAddress(address, id) {
        //In this case it gets the address from an element on the page, but obviously you  could just pass it to the method instead
//        var address = document.getElementById("address").value;

        geocoder.geocode({ 'address': address}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var $lng = results[0].geometry.location['D'];
                var $lat = results[0].geometry.location['k'];
                var $id = id;
                $.ajax({
                    'url': base + '/ajax/saveCoordinates?lng=' + $lng + '&lat=' + $lat + '&id=' + $id
                });
            }
        });
    }
</script>
</body>
</html>